<template>
  <div class="blog-detail-wrapper">
    <h1>{{blog.title}}</h1>
    <router-link :to="'/blogs?type=zone&zid='+blog.zone_id">{{blog.zone.title}}</router-link>
    <p id="date">发布日期：{{blog.post_time}}</p>
    <editor :value="blog.content" type="bubble"></editor>
    <img :src="blog.cover" />
    <Divider />
    <footer>
      <div class="left" @click="preOrNext(preBlog.id)">
        <div class="left-left">
          <Icon type="ios-arrow-back" size="32" />
        </div>
        <div class="left-right">
          上一篇：
          <br />
          {{preBlog.title}}
        </div>
      </div>
      <div class="right" @click="preOrNext(nextBlog.id)">
        <div class="right-left">
          下一篇：
          <br />
          {{nextBlog.title?nextBlog.title:'没有更多了'}}
        </div>
        <div class="right-right">
          <Icon type="ios-arrow-forward" size="32" />
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import editor from "@/components/Editor";

export default {
  name: "blog_detail",
  components: {
    editor
  },
  data() {
    return {
      blog: {
        zone: {
          title: ""
        }
      },
      preBlog: "",
      nextBlog: ""
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    fetchData() {
      let id = this.$route.params.id;
      this.axios
        .get(`/api/blog?type=detail&blog_id=${id}`)
        .then(res => {
          this.blog = res.data;
        })
        .catch(err => this.$Message.error(err));
      this.axios
        .all([
          this.axios.get(`/api/blog?type=detail&blog_id=${id - 1}`),
          this.axios.get(`/api/blog?type=detail&blog_id=${parseInt(id) + 1}`)
        ])
        .then(
          this.axios.spread((pre, next) => {
            this.preBlog = pre.data;
            this.nextBlog = next.data;
          })
        );
    },
    preOrNext(id) {
      this.$router.push(`/blog/${id}`);
    }
  }
};
</script>

<style>
</style>